<template>
  <a class="xxcf-cell">
    <span class="xxcf-cell-mask" v-if="isLink"></span>
    <label class="xxcf-cell-title">
      <slot name="icon"></slot>
      <slot name="title">
        <span class="xxcf-cell-text" v-text="title"></span>
        <span v-if="label" class="mint-cell-label" v-text="label"></span>
      </slot>
    </label>
    <div class="xxcf-cell-value">
      <slot>
        <span v-text="value"></span>
      </slot>
    </div>
  </a>
</template>

<script>
  export default {
    name: 'x-cell',
    props: {
      icon: String,
      title: String,
      label: String,
      isLink: Boolean,
      value: String
    }
  }
</script>

<style rel="stylesheet/less" lang="less">
  .xxcf-cell{
    position: relative;
    display: flex;
    flex:2;
    line-height: 1;
    padding: .4rem 30/75rem;
    font-size: 1.17em;
    align-items: center;
    background-color: #fff;
    &:after{
      content: '';
      border-bottom: 1px solid #f0f0f0;
      position: absolute;
      left: 0;
      bottom:0;
      transform: scaleY(.5);
      width: 100%;
      z-index: 20;
    }
    .Icon{
      width: 36/75rem;
      height: 36/75rem;
    }
  }
  .xxcf-cell-title{
    flex: 1;
    color: #333;
  }
  .xxcf-cell-value{
    display: flex;
    align-items: center;
    color: #656567;

  }
  .xxcf-cell-mask:after {
    background-color: rgba(0,0,0,.3);
    content: " ";
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute
  }
  .xxcf-cell-mask:active:after {
    opacity: .1
  }
</style>
